<template>
	<view class="content">

		<view class="header">
			<view class="change" v-if="show" @click="change()">普通话</view>
			<view class="change" v-else @click="change()">粤语</view>
		</view>
		<view class="main">
			<view class="item" v-for="(item,index) in list" v-show="show">
				<view class="text">
					{{item.text}}
				</view>
				<view class="icon">
					<u-icon name="volume" size="18" @click="volume(index)"></u-icon>
				</view>
				<view class="icon">
					<u-icon name="mic" size="18" @click="mic(index)"></u-icon>
				</view>
				<view class="button">
					{{item.score}}
				</view>
			</view>
			<view class="item" v-for="(item,index) in list2" v-show="!show">
				<view class="text">
					{{item.text}}
				</view>
				<view class="icon">
					<u-icon name="volume" size="18" @click="volume(index)"></u-icon>
				</view>
				<view class="icon">
					<u-icon name="mic" size="18" @click="mic(index)"></u-icon>
				</view>
				<view class="button">
					{{item.score}}
				</view>
			</view>
		</view>
		<u-popup :show="show2" @close="close" @open="open" :round="10">
			<view>
				<view class="voice">
					<button type="default" @tap="">{{voice.text}}</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				show2: false,
				list: [{
						"text": "你好",
						"score": 0,
						"voice": ""
					},
					{
						"text": "早上好",
						"score": 0,
						"voice": ""
					},
					{
						"text": "今天吃什么",
						"score": 0,
						"voice": ""
					},
					{
						"text": "王丁辉能不能死一死",
						"score": 0,
						"voice": ""

					},
					{
						"text": "今天学习了吗",
						"score": 0,
						"voice": ""
					}
				],
				list2: [{
						"text": "你好",
						"score": 0,
						"voice": ""
					},
					{
						"text": "早上好呀",
						"score": 0,
						"voice": ""
					},
					{
						"text": "今天吃什么",
						"score": 0,
						"voice": ""
					},
					{
						"text": "王丁辉能不能死一死",
						"score": 0,
						"voice": ""

					},
					{
						"text": "今天学习了吗",
						"score": 0,
						"voice": ""
					}
				],
				voice: {
					text: "长按录音",
				}
			}
		},
		methods: {
			mic(index) {
				console.log(index)
				this.show2 = true
			},
			change() {
				this.show = !this.show
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show2 = false
				// console.log('close');
			},
			press() {

			}
		}
	}
</script>

<style lang="scss">
	.content {
		.header {
			height: 70px;

			.change {
				float: right;
				width: 70px;
				text-align: center;
				margin-right: 30rpx;
				margin-top: 20px;
				padding: 5px 10px;
				border: #303133 1px solid;
				border-radius: 20px;
			}
		}

		.main {
			height: 500px;

			// background-color: #007AFF;
			.item {
				height: 60px;
				// background-color: #19BE6B;
				border-bottom: #303133 1px solid;
				margin: 0 10px 10px 10px;
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding-left: 20px;

				.text {
					width: 500rpx;
					// background-color: #007AFF;
				}

				.icon {
					width: 50rpx;
					// background-color: #007AFF;
				}

				.button {
					width: 100rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					border: #2C405A 1px solid;
					border-radius: 20px;
					font-size: 10px;
				}
			}
		}
	}

	.voice {
		height: 30px;
		padding: 150px 30px;

	}
</style>
